<template>
  <div class="app-container">
    <TheQueryForm :option="searchOption" @onSubmit="onSubmit" @onClear="onClear"></TheQueryForm>
    <el-row style="margin-bottom: 20px">
      <el-col :span="18">
        <el-radio-group size="small" v-model="queryParams.settleState">
          <el-radio-button label>全部</el-radio-button>
          <el-radio-button label="UNSETTLED">待结算</el-radio-button>
          <el-radio-button label="SETTLED">已结算</el-radio-button>
        </el-radio-group>
      </el-col>
      <el-col :span="6" style="display: flex; justify-content: flex-end">
        <el-button :loading="exportLoading" @click="handleExport">导出Excel</el-button>
      </el-col>
    </el-row>
    <TheTable
      :tableOption="tableOption"
      :pageNo.sync="pageNo"
      :limit.sync="limit"
      :api="queryPageApi"
      :queryParams="queryParams"
    />
  </div>
</template>
<script>
import TheEditForm from "@/components/TheCreateForm";
import {
  apiOrderSettlementListByPlatformWorker,
  apiOrderSettlementExportByPlatformWorker
} from "@/api/statements.js";

export default {
  components: { TheEditForm },
  data() {
    const _this = this;
    return {
      queryPageApi: apiOrderSettlementListByPlatformWorker,
      queryParams: { settleState: "" },
      pageNo: 1,
      limit: 10,
      exportLoading: false,
      searchOption: [
        {
          type: "Input",
          field: "dataId",
          label: "师傅id",
          placeholder: "师傅id",
          maxlength: 20
        },

        {
          type: "Input",
          field: "userPhoneNumber",
          label: "师傅手机号",
          placeholder: "师傅手机号"
        },
        {
          type: "Input",
          field: "settlementFlowId",
          label: "结算单id",
          placeholder: "结算单id"
        },
        {
          type: "Input",
          field: "orderId",
          label: "订单id",
          placeholder: "订单id"
        },
        {
          type: "Input",
          field: "serverSaleReturnId",
          label: "售后单id",
          placeholder: "售后单id"
        },
        {
          type: "DatePickerRange",
          field: "times",
          label: "完成结算时间",
          placeholder: "完成结算时间"
        }
      ],
      tableOption: [
        {
          label: "结算单id",
          prop: "settlementFlowId",
          fixed: "left"
        },
        {
          label: "师傅信息",
          prop: "info",
          fixed: "left",
          width: 250,
          render(h, { row }) {
            const dom = (
              <div class="row">
                <div class="span4">
                  <el-avatar
                    fit="fill"
                    style="width:80px;height:80px;"
                    src={row.avatar}
                  ></el-avatar>
                </div>
                <div class="span20">
                  <div>{row.workerName}</div>
                  <div>{row.userPhoneNumber}</div>
                </div>
              </div>
            );
            return dom;
          }
        },
        {
          label: "关联订单/售后单",
          prop: "orderId",
          width: 250,
          render(h, { row }) {
            if (row.settleType == "DECREASE") {
              return (
                <div class="">
                  <div>关联订单:{row.orderId}</div>
                  <div>售后单:{row.serverSaleReturnId}</div>
                </div>
              );
            }
            return (
              <div class="">
                <div>关联订单:{row.orderId}</div>
              </div>
            );
          }
        },
        {
          label: "结算类型",
          prop: "settleType",
          width: 100,
          formatter({ settleType }) {
            return this.$filters.filterSettleType(settleType);
          }
        },
        {
          label: "原因",
          prop: "reason",
          width: 150,
          formatter({ reason }) {
            return this.$filters.filterWaterComeInType(reason);
          }
        },
        {
          label: "结算金额",
          prop: "settlementAmount",
          width: 100,
          formatter({ settlementAmount, settleState, estimatedAmount }) {
            if (settleState == "UNSETTLED") {
              return _this.$filters.filterPriceFormat(estimatedAmount);
            } else {
              return _this.$filters.filterPriceFormat(settlementAmount);
            }
          }
        },
        {
          label: "结算状态",
          prop: "settleState",
          width: 100,
          formatter({ settleState }) {
            return _this.$filters.filterSettleState(settleState);
          }
        },
        {
          label: "创建时间",
          width: 100,
          prop: "createTime",
          render(createElement, { row }) {
            try {
              const strArr = row.createTime.split(" ");
              const dom = (
                <div class="">
                  <div>{strArr[0]}</div>
                  <div>{strArr[1]}</div>
                </div>
              );
              return dom;
            } catch (error) {
              return <div></div>;
            }
          }
        },

        {
          label: "设定结算时间",
          width: 120,
          prop: "settingSettleTime",
          render(createElement, { row }) {
            try {
              const strArr = row.settingSettleTime.split(" ");
              const dom = (
                <div class="">
                  <div>{strArr[0]}</div>
                  <div>{strArr[1]}</div>
                </div>
              );
              return dom;
            } catch (error) {
              return <div></div>;
            }
          }
        },
        {
          label: "完成结算时间",
          width: 120,
          prop: "finishedSettleTime",
          render(createElement, { row }) {
            try {
              const strArr = row.finishedSettleTime.split(" ");
              const dom = (
                <div class="">
                  <div>{strArr[0]}</div>
                  <div>{strArr[1]}</div>
                </div>
              );
              return dom;
            } catch (error) {
              return <div></div>;
            }
          }
        }
      ]
    };
  },
  mounted() {},
  methods: {
    onSearchUser() {
      this.bailReturnForm.name = "1";
      this.bailReturnForm.telephone = 13144220121;
    },
    // 导出
    async handleExport() {
      this.exportLoading = true;
      const res = await apiOrderSettlementExportByPlatformWorker({
        ...this.queryParams
      });
      if (res.code === "SUCCESS") {
        let header = [
          {
            title: "结算单id",
            prop: "id",
            valueType: "s"
          },
          {
            title: "师傅信息",
            prop: "",
            children: [
              {
                title: "姓名",
                prop: "workerName",
                valueType: "s"
              },
              {
                title: "手机号",
                prop: "userPhoneNumber",
                valueType: "s"
              }
            ]
          },
          {
            title: "关联订单/售后单",
            prop: "orderId",
            valueType: "s"
          },
          {
            title: "结算类型",
            prop: "settleType",
            valueType: "s"
          },
          {
            title: "原因",
            prop: "reason",
            valueType: "s"
          },

          {
            title: "结算金额",
            prop: "settlementAmount",
            valueType: "n",
            numFmt: $numFmt.money
          },
          {
            title: "结算状态",
            prop: "settleState", //debtorTime  repaymentTime
            valueType: "s"
          },
          {
            title: "创建时间",
            prop: "createTime"
          },

          {
            title: "设定结算时间",
            prop: "settingSettleTime",
            valueType: "s",
            width: 100
          },
          {
            title: "完成结算时间",
            prop: "finishedSettleTime",
            valueType: "s"
          }
        ];

        let dataSource = res.data.map(item => {
          return {
            ...item,
            settleType: this.$filters.filterSettleType(item.settleType),
            reason: this.$filters.filterWaterComeInType(item.reason),
            settlementAmount:
              item.settleState == "UNSETTLED"
                ? this.$filters.filterPriceFormat(estimatedAmount)
                : this.$filters.filterPriceFormat(item.settlementAmount),
            settleState: this.$filters.filterSettleState(item.settleState)
          };
        });
        const option = {
          dataSource: dataSource,
          header: header,
          fileName: "师傅结算明细"
        };
        window.$Json2Excel(option);
        this.exportLoading = false;
      } else {
        this.$message({
          message: "导出操作失败,请重试",
          type: "warring"
        });
        this.exportLoading = false;
      }
    },

    onSubmit({ values }) {
      console.log(values);
      if (values.hasOwnProperty("times")) {
        values = {
          ...values,
          finishedStartTime: values.times ? values.times[0] : "",
          finishedEndTime: values.times ? values.times[1] : ""
        };
        delete values.times;
      }
      this.queryParams = { ...this.queryParams, ...values };
    },
    onClear() {
      this.queryParams = {};
    }
  }
};
</script>
<style scoped lang="scss">
::v-deep .row {
  display: flex;
  align-items: center;
  .span4 {
    flex: 1;
    margin-right: 20px;
  }
  .span20 {
    flex: 5;
  }
}
</style>
